<template>
  <div class="select_dress">
     <header>
       <p><img src="../assets/img/left@2x.png" ></p>
       <p>选择地点</p>
       <p></p>
     </header>
     <div class="search_dress">
      <p>
        <img src="../assets/img/searcher.png"/>
        <input type="text" placeholder="请输入七点">
      </p>
    </div>
    <div class="mydress">
      <p><img src="../assets/img/loca.png"/><span>我的位置</span></p>
      <p><img src="../assets/img/rocer.png" /></p>
    </div>
    <ul>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>公交车站</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
      <li>
        <span><img src="../assets/img/searcher.png" ></span>
        <span>加油站</span>
        <span>（朝阳路东口）</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'check_dress',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/less/style.less';
.select_dress{
  height: 100%;
  background: #f2f2f2;
  .font(26,#797979);
  header {
    .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
  }
  .search_dress {
    .margin-top(24);
    .padding-bottom(24);
    p {
      .px2rem(height,70);
      width: 92%;
      margin: auto;
      background: #fff;
      display: flex;
      align-items: center;
      img {
        .margin-left(15);
        .px2rem(height,35);
        .px2rem(width,35);
      }
      input {
        .margin-left(15);
        border: none;
      }
    }
  }
  .mydress{
    display: flex;
    justify-content: space-between;
    background: #fff;
    .px2rem(height,130);
    align-items: center;
    p:nth-child(1){
      display: flex;
      align-items: center;
      padding-left: 4%;
      img {
        display: block;
        .px2rem(height,42);
        .px2rem(width,32);
      }
      span {
        /* display: block; */
        /* padding-left: 4%; */
        .padding-left(35);
      }
    }
    p:nth-child(2){
      padding-right: 4%;
      img{
        .px2rem(height,31);
        .px2rem(width,31);
      }
    }
  }
  ul{
    background: #fff;
    li {
      display: flex;
      align-items: center;
      .px2rem(height,96);
      .border-bottom(1,solid,#eaeaea);
      span:nth-child(1) {
        padding-left: 4%;
        display: block;
        img {
          .px2rem(height,35);
          .px2rem(width,35);
        }
      }
      span:nth-child(2) {
        padding-left: 4%;
        display: block;
        color: #5ec28e;
      }
      span:nth-child(3) {
        padding-left: 2%;
        display: block;
      }
    }
  }
}
</style>
